{% set parameters = parameters ?? {} %}

<div class="row mt-4 mb-4 align-items-center"
     data-controller="translator-demo-block"
     data-translator-demo-block-message-value="{{ message }}"
>
    <div class="col-5">
        <div class="Terminal Terminal_body">
            <div class="Terminal_content">
                <pre data-translator-demo-block-target="code">
<small><span class="hl-keyword">import</span> { trans, <span class="hl-variable constant_">{{ message }}</span> } <span class="hl-keyword">from</span> '<span class="hl-value">../translator</span>';</small>

<span class="hl-property function_">trans</span>(<span class="hl-variable constant_">{{ message }}</span>{% if parameters %}, {
{% for name, value in parameters %} {% set is_string = not (value matches '/^[\\d\\.]+$/') %}
    <span class="hl-property">{{ name }}</span>:&nbsp;
{{- name ends with 'date' ? '<span class="hl-keyword">new</span> <span class="hl-property class_">Date</span>(' }}{{- is_string ? "'" }}<span class="hl-value" data-code-parameter="{{ name }}">{{ value }}</span>{{ is_string ? "'" }}{{ name ends with 'date' ? ')' }},
{% endfor %}
}}{% endif %})</pre>
            </div>
        </div>
    </div>
    <div class="col-3">
        {% block parameters %}{% endblock %}
    </div>
    <div class="col justify-content-between">
        <div class="mb-2">
            🇬🇧 <span data-translator-demo-block-target="outputs" data-locale="en"></span>
        </div>
        <div>
            🇫🇷 <span data-translator-demo-block-target="outputs" data-locale="fr"></span>
        </div>
    </div>
</div>
